<template>
    <div class="entertainmentindex">
        <m-header :type="1" :titleText=titleText></m-header>
        <slider style="  box-shadow: 0 2px 2px #cecece;">
            <div>
                <img src="../../../../static/yule.png" alt="">
            </div>
            <div>
                <img src="../../../../static/yule.png" alt="">
            </div>
            <div>
                <img src="../../../../static/yule.png" alt="">
            </div>
            <div>
                <img src="../../../../static/yule.png" alt="">
            </div>
        </slider>
        <div class="entertainmentbox" ref="box">
            <router-link class="item" to="/service/video" tag="div">
                <div class="icon zhubo"></div>
            </router-link>
            <router-link class="item" tag="div" to="/service/video">
                <div class="icon shequ"></div>
            </router-link>
            <router-link class="item" tag="div" to="/service/video">
                <div class="icon qushi" tag="div"></div>
            </router-link>
            <router-link class="item" tag="div" to="/service/video">
                <div class="icon gonghui"></div>
            </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
import Slider from '@/base/slider/slider';
import MHeader from 'components/m-header/m-header';
// import { getIndexInfo } from '@/base/api/indexpage/getindexinfo';

export default {
    data() {
        return {
            titleText: '娱乐',
        };
    },
    mounted() {
        let children = this.$refs.box.children;
        for (let i = 0; i < children.length; i++) {
            children[i].style.height = Math.floor(this.$refs.box.clientWidth / 2) + 'px';
        }
    },
    components: {
        Slider,
        MHeader,
    },
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

.entertainmentindex {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 50px;
    background: #eeeeee;

    .entertainmentbox {
        width: 100%;
        background: #f4f4f4;
        display: flex;
        flex-wrap: wrap;
        position: fixed;
        bottom: 51px;

        .item {
            width: 50%;
            height: 188px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #cbcbcb;

            .icon {
                width: 40%;
                height: 40%;

                &.zhubo {
                    bg-image('zhubo');
                    background-size: 100% 100%;
                }

                &.shequ {
                    bg-image('shequ');
                    background-size: 100% 100%;
                }

                &.qushi {
                    bg-image('chengqushi');
                    background-size: 100% 100%;
                }

                &.gonghui {
                    bg-image('gonghui');
                    background-size: 100% 100%;
                }
            }

            &:nth-child(1) {
                border-right: 1px solid #cbcbcb;
                border-top: 1px solid #ffffff;
            }

            &:nth-child(2) {
                border-top: 1px solid #ffffff;
            }

            &:nth-child(3) {
                border-right: 1px solid #cbcbcb;
            }
        }
    }
}
</style>

